<template>
  <div class="full-box padding-box shadow-box">
    <!-- <div class="header">
      <div v-for="(head, index) in heads" :key="index">
        {{ head }}
      </div>
    </div>
    <div class="scene_group" v-for="(item, index) in tableData" :key="index">
      <div class="type">场景： {{ item.scene }}</div>
      <div
        class="childs"
        v-for="(sub, sIndex) in item.children"
        :key="index + sIndex"
      >
        <div>
          {{ sub[value[sIndex]] }}
        </div>
      </div>
    </div> -->
    <el-table
      :header-cell-style="{
        background: '#C3E2FF',
        color: '#000',
        height: '60px',
      }"
      :data="sortData"
      :span-method="rowspanMethods"
      height="100%"
      border
      stripe
    >
      <el-table-column align="center" type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column
        align="center"
        label="场景"
        prop="scene"
        min-width="200px"
      >
        <template slot-scope="scope">
          <div style="height: 100%">
            {{ scope.row.scene }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="子场景"
        prop="sub_scene"
        min-width="200px"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="预警监控点"
        prop="description"
        min-width="200px"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="处置单位"
        prop="dept_name"
        min-width="200px"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="是否自动预警"
        prop="enabled"
        min-width="100px"
      >
        <template slot-scope="scope">
          <i
            v-if="scope.row.enabled == 1"
            class="tip-log el-icon-success"
            style="color: #67c23a"
          ></i>
          <i
            v-if="scope.row.enabled == 0"
            class="tip-log el-icon-error"
            style="color: #f56c6c"
          ></i>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="130px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="预警点编辑"
      :visible.sync="dialog.edit"
      width="50%"
      @close="dialog.edit = false"
    >
      <el-form
        v-if="form"
        :model="form"
        ref="form"
        :rules="rules"
        label-width="130px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="场景" prop="scene">
          <el-input v-model="form.scene" clearable></el-input>
        </el-form-item>
        <el-form-item label="子场景" prop="sub_scene">
          <el-input v-model="form.sub_scene" clearable></el-input>
        </el-form-item>
        <el-form-item label="预警监控点" prop="description">
          <el-input
            type="textarea"
            v-model="form.description"
            clearable
            :autosize="{
              minRows: 1,
              maxRows: 5,
            }"
          ></el-input>
        </el-form-item>
        <el-form-item label="处置单位类型" prop="type">
          <el-select v-model="form.type">
            <el-option :key="1" label="监管部门" value="1"></el-option>
            <el-option :key="2" label="纪检组" value="2"></el-option>
            <el-option :key="3" label="行业主管部门" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.type == 1" label="监管部门" prop="regulator">
          <el-select
            v-model="form.regulator"
            value-key=""
            placeholder=""
            clearable
            filterable
          >
            <el-option
              v-for="item in depts"
              :key="item.id"
              :label="item.dept_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled">
          <el-switch
            v-model="form.enabled"
            active-color="#13ce66"
            inactive-color="#ccc"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
          {{ form.enabled == 1 ? "预警中" : "已禁用" }}
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="save"
            >保存</el-button
          >
          <el-button size="default" @click="dialog.edit = false"
            >返回</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getWarningList, postEditWarningNode } from "@/api/BackendManage/Index";
import { getDeptList } from "@/api/System/Department";
import { required } from "@/utils/eValidate";
export default {
  data() {
    return {
      originData: [],
      tableData: [],
      subsData: [],
      sortData: [],
      calc: {
        index: 0,
        dataIndex: 0,
      },
      dialog: {
        edit: false,
      },
      loading: false,
      form: null,
      rules: {
        scene: [required],
        sub_scene: [required],
        description: [required],
        type: [required],
        regulator: [required],
      },
    };
  },
  methods: {
    initData() {
      getWarningList({
        pageNum: 1,
        pageSize: 10000,
      }).then((res) => {
        if (res.code == 0) {
          this.originData = res.data;

          this.dataCombo(this.originData);
        }
      });
    },

    dataCombo(origin) {
      this.tableData = origin.reduce((pre, cur) => {
        let sameScene = pre.find((i) => i.scene == cur.scene);

        let scene;
        let rest;
        if (sameScene) {
          if (sameScene.children.indexOf(cur.id) === -1) {
            ({ scene, ...rest } = cur);

            sameScene.children.push(cur);
          }
        }

        if (!sameScene) {
          ({ scene, ...rest } = cur);

          pre.push({
            scene: scene,
            children: [cur],
          });
        }

        return pre;
      }, []);

      let newArr = [];

      this.tableData.forEach((i) => {
        newArr.push(...i.children);
      });

      this.sortData = newArr;

      let tempIndex = 0;

      this.tableData.forEach((item) => {
        let mergeNum = item.children.length;
        this.sortData[tempIndex].mergeRows = mergeNum;
        tempIndex += mergeNum;
      });

      // this.subsData = origin.reduce((pre, cur) => {
      //   let sameScene = pre.find((i) => i.sub_scene == cur.sub_scene);

      //   let sub_scene;
      //   let rest;
      //   if (sameScene) {
      //     if (sameScene.children.indexOf(cur.id) === -1) {
      //       ({ sub_scene, ...rest } = cur);

      //       sameScene.children.push(cur);
      //     }
      //   }

      //   if (!sameScene) {
      //     ({ sub_scene, ...rest } = cur);

      //     pre.push({
      //       sub_scene: sub_scene,
      //       children: [cur],
      //     });
      //   }

      //   return pre;
      // }, []);

      // let subIndex = 0;

      // this.subsData.forEach((item) => {
      //   let mergeNum = item.children.length;
      //   this.sortData[subIndex].mergeRows2 = mergeNum;
      //   subIndex += mergeNum;
      // });
    },

    rowspanMethods({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: row.mergeRows > 0 ? row.mergeRows : 0,
          colspan: row.mergeRows > 0 ? 1 : 0,
        };
      }
      // if (columnIndex === 2) {
      //   return {
      //     rowspan: row.mergeRows2 > 0 ? row.mergeRows2 : 0,
      //     colspan: row.mergeRows2 > 0 ? 1 : 0,
      //   };
      // }
    },
    initDepts() {
      getDeptList({
        pageNum: 1,
        pageSize: 99999,
      }).then((res) => {
        if (res.code == 0) {
          this.depts = res.data;
        }
      });
    },
    changeWarningNodeStatus(row) {},
    edit(row) {
      this.dialog.edit = true;
      this.form = row;
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.type != 1) {
            this.form.dept_name = "";
            this.form.regulator = "";
          }

          postEditWarningNode(this.form).then((res) => {
            if (res.code == 0) {
              this.$message.success("保存成功");
              this.dialog.edit = false;
              this.initData();
            }
          });
        }
      });
    },
  },
  created() {
    this.initData();
    this.initDepts();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.warning-table {
  width: 100%;
  thead {
    width: 100%;
    height: 60px;
    background-color: rgb(193, 224, 253);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }
  tbody {
    text-align: center;
    tr {
      height: 40px;
      background-color: #eee;
    }
  }
}

.header {
  width: 100%;
  display: flex;
  > div {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background-color: rgb(193, 224, 253);
    &:nth-child(1) {
      width: 10%;
    }
    &:nth-child(2) {
      width: 20%;
    }
    &:nth-child(3) {
      width: 30%;
    }
    &:nth-child(4) {
      width: 20%;
    }
    &:nth-child(5) {
      width: 20%;
    }
  }
}

.scene_group {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  > .type {
    font-weight: 600;
    font-size: 16px;
    margin-left: 20px;
  }
  &:nth-child(2n + 1) {
    background-color: #ccc;
  }
}

.childs {
  display: flex;
  > div {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    &:nth-child(1) {
      width: 10%;
    }
    &:nth-child(2) {
      width: 20%;
    }
    &:nth-child(3) {
      width: 30%;
    }
    &:nth-child(4) {
      width: 20%;
    }
    &:nth-child(5) {
      width: 20%;
    }
  }
}

.tip-log {
  font-size: 24px;
}
</style>
